import { useState } from 'react';
import { Form, Input, Button, Checkbox, Row, Col } from 'antd';
import { history } from 'umi';
import request from '@/utils/request';
import styles from './style.less';

export default function IndexPage() {
  const [form] = Form.useForm();

  const [emailChecked, setEmailChecked] = useState('email');

  const login = () => {
    form.validateFields().then((value) => {
      const params = {
        ...value,
        username: value[emailChecked],
        email: value[emailChecked],
      };
      console.log('params', params);

      request
        .post('/auth/login', params)
        .then((res: any) => {
          if (res.status === 200) {
            history.push('/comment');
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    });
  };

  return (
    <div className={styles.box}>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        autoComplete="off"
      >
        {emailChecked === 'email' ? (
          <Form.Item
            label="email"
            name="email"
            rules={[
              { required: true, message: '请输入email' },
              {
                pattern:
                  /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                message: '请输入正确的email',
              },
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        ) : (
          <Form.Item
            label="username"
            name="username"
            rules={[
              { required: true, message: '请输入username' },
              {
                pattern: /^[a-zA-Z0-9]{5,20}$/,
                message: 'username必须是5-20位数字和字母组合',
              },
            ]}
          >
            <Input placeholder="请输入username" />
          </Form.Item>
        )}

        <Form.Item
          label="password"
          name="password"
          rules={[
            { required: true, message: '请输入password' },
            {
              pattern: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,20}/,
              message:
                'password必须有大写字母小写字母数字和特殊符号，长度为8-20位',
            },
          ]}
        >
          <Input.Password placeholder="请输入password" />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 6, span: 18 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Row>
          <Col offset={6} span={18}>
            <Checkbox
              checked={emailChecked === 'email'}
              onChange={(e) =>
                setEmailChecked(e.target.checked ? 'email' : 'username')
              }
            >
              是否使用邮箱登陆
            </Checkbox>
          </Col>
        </Row>

        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button
            type="primary"
            style={{ width: '100%', marginTop: 20 }}
            onClick={login}
          >
            登陆
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
